import {useEffect,useState} from 'react';
import { Statistic, Card, Row, Col } from 'antd';
import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
import {fetchDashboard} from '@/services/dashboard'
const DashBoard = () => {
	
	
	//定义组件状态 
	
	let [data,setData] = useState<{users_count: number; goods_count: number; order_count: number}>({
		users_count:0,
		goods_count:0,
		order_count:0
	})
	//@ts-ignore
	useEffect(async () => {
		//发送请求获取统计数据
		const res = await fetchDashboard()
		setData(res)
		console.log(data)

	},[])
	return (
		<div>
			<Row gutter={16}>
				<Col span={8}>
					<Card>
						<Statistic
							title="用户数"
							value={data.users_count}
							precision={0}
							valueStyle={{ color: '#3f8600' }}
							prefix={<ArrowUpOutlined />}
							
						/>
					</Card>
				</Col>
				<Col span={8}>
					<Card>
						<Statistic
							title="订单数"
							value={data.goods_count}
							precision={0}
							valueStyle={{ color: '#cf1322' }}
							prefix={<ArrowDownOutlined />}
							
						/>
					</Card>
				</Col>
				<Col span={8}>
					<Card>
						<Statistic
							title="商品数"
							value={data.order_count}
							precision={0}
							valueStyle={{ color: '#cf1322' }}
							prefix={<ArrowDownOutlined />}
							
						/>
					</Card>
				</Col>
			</Row>
		</div>
	);
};

export default DashBoard;